<template>
	<div class="progress-box" :style="progressStyle">
		<svg>
			<circle :cx='radius' :cy='radius' :r='radius'></circle>
			<circle :cx='radius' :cy='radius' :r='radius'></circle>
		</svg>
		<div class="text">{{ progressNum }}%</div>
	</div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
	value: {
		type: Number,
		default: 60
	},
	color: {
		type: String,
		default: 'red'
	},
	background: {
		type: String,
		default: '#fff'
	},
	radius: {
		type: Number,
		default: 70
	},
	strokeWidth: {
		type: Number,
		default: 10
	}
})
const progressNum = computed(() => {
	if (props.value <= 0) return 0;
	if (props.value >= 100) return 100;
	return props.value
})
const progressStyle = computed(() => {
	return {
		width: `${props.radius * 2 + props.strokeWidth}px`,
		height: `${props.radius * 2 + props.strokeWidth}px`,
		'--progress-perimeter': circlePerimeter(props.radius),
		'--progress-stroke-width': props.strokeWidth,
		'--progress-value': progressNum.value,
		'--progress-color': props.color,
		'--progress-background': props.background
	}
})
function circlePerimeter(radius) {
	const pi = 3.141592653589793;
	return Math.ceil(2 * pi * radius);
}
</script>
<style lang='less' scoped>
.progress-box {
	width: 160px;
	height: 160px;
	position: relative;

	.text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

svg {
	width: 100%;
	height: 100%;

	circle {
		width: 100%;
		height: 100%;
		fill: none;
		stroke-width:var(--progress-stroke-width);
		transform: translate(5px, 5px);
		stroke-dasharray: var(--progress-perimeter);
		stroke-dashoffset: var(--progress-perimeter);
		stroke-linecap: round;

		&:nth-child(1) {
			stroke-dashoffset: 0;
			stroke: var(--progress-background)
		}

		&:nth-child(2) {
			stroke-dashoffset: calc(var(--progress-perimeter) - (var(--progress-perimeter) * var(--progress-value))/100);
			stroke: var(--progress-color);
		}
	}
}
</style>
